import React from 'react'
import logo from '../../assets/petlogo.png'
import QQ   from'../../assets/QQ.png'
import WX   from'../../assets/weixin.png'
import axios from '../../api'
import  toast  from 'react-hot-toast'
import { useNavigate } from 'react-router'
import styles from './index.module.less'
import { Button, Input, Form } from 'react-vant'
export default function Register() {
  const navigate = useNavigate()
   const [form] = Form.useForm()
    const onFinish = async values => {
    const res= await axios.post('/user/register',{
        username:values.username,
        password:values.password,
        nickname:values.nickname
      })
      toast.success(res.msg)
      setTimeout(()=>{
        navigate('/login',{state:{username:values.username,password:values.password}})
    },1000)
  }
  return (
    <div className={styles.login}>
      <div className={styles['login-wrapper']}>
        <div className={styles.avatar}>
          <img className={styles['avatar-img']} src={logo} alt="" />
        </div>
      </div>
      <div className={styles['title-father']}>
         <h1 className={styles.title}>欢迎来到宠物之家注册页</h1>

        <Form
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType='submit' type='primary' block>
            注册
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
  
        rules={[{ required: true, message: '请填写用户名' }]}
        name='username'
        label='用户名'
       
      >
        <Input placeholder='请输入用户名' />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name='password'
        label='密码'
       
      >
        <Input placeholder='请输入密码' />
      </Form.Item>
            <Form.Item
        rules={[{ required: true, message: '请填写昵称' }]}
        name='nickname'
        label='昵称'
      >
        <Input placeholder='请输入昵称' />
      </Form.Item>


    </Form>

 
      <div className={styles.container}>
        <img src={QQ} alt="" />
        <img src={WX} alt="" />
      </div>

      </div>
   <div className={styles['loigin-tip']} onClick={()=>navigate('/login')} >

          已有账号？点这里登录
      </div>
    </div>
  )
}
